<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>首页</title>
    <link rel="stylesheet" href="./css/weui.min.css" />
    <link rel="stylesheet" href="./css/dropload.css" />
  </head>
  <style>
    .navbar {
      padding: 0 10px;
      height: 44px;
      line-height: 44px;
    }
    .placeholder {
      text-align: center;
    }
    .button {
      margin: 10px;
    }
    .weui-btn {
      width: 100%;
    }
  </style>
  <body data-weui-theme="light">
    <div class="weui-flex navbar">
      <div class="weui-flex__item"><div class="placeholder">首页</div></div>
      <div><div class="placeholder">退出</div></div>
    </div>
    <div class="container">
      <div class="weui-tab">
        <div class="weui-navbar">
          <div
            role="tab"
            aria-selected="true"
            aria-controls="panel1"
            id="tab1"
            class="weui-navbar__item weui-bar__item_on"
          >
            列表
          </div>
          <div
            role="tab"
            aria-controls="panel2"
            id="tab2"
            class="weui-navbar__item"
          >
            添加
          </div>
        </div>
        <div
          role="tabpanel"
          id="panel1"
          aria-labelledby="tab1"
          class="weui-tab__panel"
        >
          <div id="list-group"></div>
        </div>
        <div
          style="display: none"
          role="tabpanel"
          id="panel2"
          aria-labelledby="tab2"
          class="weui-tab__panel"
        >
          
        </div>
      </div>
    </div>
    <script src="./js/zepto.min.js"></script>
    <script src="./js/dropload.min.js"></script>
    <script src="./js/weui.min.js"></script>
    <script type="text/javascript">
      // 页数
      var page = 0;
      // 每页展示5个
      var size = 5;
      $(function () {
        $('#tab2').on('click',function() {
          window.location.href = './add.html'
        })
      });

      // 下拉加载
      var dropload =  $("#panel1").dropload({
        scrollArea: window,
        loadDownFn: function (me) {
          page++;
          // 拼接HTML
          var result = "";
          $.ajax({
            type: "GET",
            url: "./js/list.json?page="+page,
            dataType: "json",
            success: function (data) {
              console.log(data);
              var arrLen = data.length;
              if (arrLen > 0) {
                for (var i = 0; i < arrLen; i++) {
                  result += `
                            <div class="weui-cells">
                              <a class="weui-cell weui-cell_access" href="javascript:">
                                <span class="weui-cell__bd">
                                  <div>名字: 吉利猪扒店</div>
                                  <div>店名: 吉利猪扒店</div>
                                  <div>地址: 广东省佛山市禅城区旮旯头1号</div>
                                </span>
                                <span class="weui-cell__ft"> </span>
                              </a>
                            </div>
                            `;
                }
                // 如果没有数据
              } else {
                // 锁定
                me.lock();
                // 无数据
                me.noData();
              }
              // 为了测试，延迟1秒加载
              setTimeout(function () {
                // 插入数据到页面，放到最后面
                $("#list-group").append(result);
                // 每次数据插入，必须重置
                me.resetload();
              }, 1000);
            },
            error: function (xhr, type) {
              alert("Ajax error!");
              // 即使加载出错，也得重置
              me.resetload();
            },
          });
        },
      });
    </script>
  </body>
</html>
